<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui" >

    <h:head>
        <title>MeteoCal - Sign Up</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </h:head>
    <h:body>
        <h:form id="registration">
            <p:growl id="growl" autoUpdate="true" showSummary="false" redisplay="false" showDetail="true" sticky="true" />  
            <p:panel id='signupPanel' header='Registration Form' style="text-align: center;border: none">
                <div>
                    <h:panelGrid columns="2" id='signupForm' style="margin: 0 auto">  
                        <h:outputLabel style="font-weight: bold;" for="username">Username:</h:outputLabel>
                        <p:inputText id="username" value="#{registrationBean.user.username}" required="true" requiredMessage="Insert a username"/>
               

                        <h:outputLabel style="font-weight: bold;" for="password">Password:</h:outputLabel>
                        <p:password id="password" value="#{registrationBean.user.password}" 
                                    feedback="true" match="pwd2" label="Password" required="true" requiredMessage="Insert a Password" />
     

                        <h:outputLabel style="font-weight: bold;" for="pwd2">Confirm Password:</h:outputLabel>
                        <p:password id="pwd2" label="Confirm Password" required="true" requiredMessage="Must Confirm Password"/>
                 

                        <h:outputLabel style="font-weight: bold;" for="name">Name:</h:outputLabel>
                        <p:inputText id="name" value="#{registrationBean.user.name}" required="true" requiredMessage="Insert your Name"/>
                       
                        <h:outputLabel style="font-weight: bold;" for="email">E-mail Address:</h:outputLabel>
                        <p:inputText id="email" value="#{registrationBean.user.email}" required="true" requiredMessage="Insert an email address"/>
                   

                        <h:outputLabel style="font-weight: bold;" for="city">City:</h:outputLabel>
                        <p:inputText id="city" value="#{registrationBean.user.city}" required="true" requiredMessage="Insert your Location"/>
                       
                        <h:outputLabel style="font-weight: bold;" for="phonenumber">Phone Number:</h:outputLabel>
                        <p:inputMask id="phonenumber" value="#{registrationBean.user.phonenumber}" mask="999-9999999"/>
                       
                    
                    
                </h:panelGrid>
                </div> 
                <br></br>
                <br></br>
                <div align="center">
                    <p:commandButton id="submit" value="Register" update="registration"
                                     action="#{registrationBean.register()}" />
                    </div>
            </p:panel>
            
        </h:form>
        
        
    </h:body>
</html>
